<template>
	<div class="app">
		<myNavbar title="消费记录"></myNavbar>
		<div class="favorite-none" v-if="orderList.length==0">
			<image class="favorite-none-image " src="http://cdn.rzico.com/v4.0/footprint-none.png"></image>
			<div class="favorite-none-text">暂无记录</div>
			<!-- <div @click="goShopping" class="favorite-none-button">
				<text style="color: white;font-size: 32px;">去逛逛</text>
			</div> -->
		</div>
		<list v-if="orderList.length>0">
			<refresh class="refresh" @refresh="onrefresh" @pullingdown="onpullingdown" :display="refreshing ? 'show' : 'hide'">
				<text class="indicator-text">Refreshing ...</text>
				<loading-indicator class="indicator"></loading-indicator>
			</refresh>
			<cell v-for="(num, i) in orderList">
                
				<order @refreshClick="refreshClick" :orderData="num"></order>
			</cell>
			<cell>
				<noData v-if="orderList.length == 0" noDataText="暂无订单"></noData>
			</cell>
			<loading v-if="orderList.length>=5" class="loading" @loading="onloading" :display="loadinging ? 'show' : 'hide'">
				<text class="indicator-text">Loading ...</text>
				<loading-indicator class="indicator"></loading-indicator>
			</loading>

		</list>

	</div>
</template>
<script>
	import {
		list
	} from '../../../api/order';
	import order from '../../../components/order/list.vue';
	import noData from '../../../components/noData/noData.vue'
	const eeui = app.requireModule('eeui');
	const modal = app.requireModule('modal');
	import myNavbar from '../../../components/myNavbar/myNavbar.vue'
	export default {

		name: '',
		data() {
			return {
				id:'',
				statusBarHeight: eeui.getStatusBarHeightPx(),
				pageNum: 1,
				pageSize: 5,
				orderList: [],
				paymentStatus: '', // 付款状态
				shippingStatus: '', // 配送状态
				orderStatus: '', // 订单状态
				refreshing: false,
				loadinging: false,
			}
		},
		created() { // 在实例创建完成后被立即调用
		this.id = app.config.params
		this.loadList()
		},
		methods: {
			loadList() {
				var _this = this;
				eeui.loading();
				list({
					memberId:this.id,
					pageNum: _this.pageNum,
					pageSize: _this.pageSize,
					paymentStatus: _this.paymentStatus, // 付款状态
					shippingStatus: _this.shippingStatus, // 配送状态
					orderStatus: _this.orderStatus, // 订单状态
					mchId: _this.getGlobalData().mchId
				}).then(
					res => {
						if (res.type == 'success') {
							res.data.data.forEach(function(item) {
								item.itemList.forEach(function(items) {
									items.thumbnail = _this.thumbnail(items.thumbnail, 170, 170)
								})
								_this.orderList.push(item)
							})
                            console.log(_this.orderList)
							_this.loading = _this.pageSize <= res.data.data.length;
							eeui.loadingClose();
						} else {
							eeui.loadingClose();
						}
					}
				).catch(error => {
					eeui.loadingClose();
					console.log(error)
				})
			},
			onrefresh(event) {
				var _this = this
				this.refreshing = true
				setTimeout(() => {
					_this.pageNum = 1;
					_this.orderList = []
					_this.loadList()
					_this.refreshing = false
				}, 2000)
			},
			onpullingdown(event) {
			},
			onloading(event) {
				var _this = this
				this.loadinging = true
				setTimeout(() => {
					if (_this.loading == true) {
						_this.pageNum = this.pageNum + 1;
						_this.loadList()
					}
					_this.loadinging = false
				}, 2000)
			},
			refreshClick() {
				this.orderList = []
				this.loadList()
			},


	},
	components: {
		myNavbar,
		order
	},
	}
</script>

<style scoped>
	    .app {
	        flex: 1;
			background-color: rgb(248,248,248);
	    }

		.favorite-none {
			width: 750px;
			display: flex;
			align-items: center;
			flex: 1;
			justify-content: center;
		}
		.favorite-none-image {
			text-align: center;
			display: block;
			margin: 0 auto;
			width: 196px;
			height: 131px;
		}

		.favorite-none-text {
			text-align: center;
			letter-spacing: 5px;
			font-size: 28px;
			font-family: PingFang SC;
			font-weight: 400;
			color: rgba(26, 26, 30, 1);
			line-height: 42px;
			opacity: 0.3;
			margin-top: 30px;
		}
	 .refresh {
	        width: 750px;
	        display: -ms-flex;
	        display: -webkit-flex;
	        display: flex;
	        -ms-flex-align: center;
	        -webkit-align-items: center;
	        -webkit-box-align: center;
	        align-items: center;
	    }

	    .loading {
	        width: 750px;
	        display: -ms-flex;
	        display: -webkit-flex;
	        display: flex;
	        -ms-flex-align: center;
	        -webkit-align-items: center;
	        -webkit-box-align: center;
	        align-items: center;
	    }

	    .indicator-text {
	        color: #888888;
	        font-size: 42px;
	        text-align: center;
	    }

	    .indicator {
	        margin-top: 16px;
	        height: 40px;
	        width: 40px;
	        color: blue;
	    }
</style>
